import katex from 'katex';
import 'katex/dist/katex.min.css';
import type { FormulaFormatOptions } from '../../types';

// KaTeX渲染选项
interface RenderOptions extends FormulaFormatOptions {
  throwOnError?: boolean;
  displayMode?: boolean;
}

/**
 * KaTeX渲染器 - 负责将LaTeX代码渲染为可视化公式
 */
export class KaTeXRenderer {
  /**
   * 渲染LaTeX为HTML
   * @param latex LaTeX代码
   * @param options 渲染选项
   * @returns 渲染结果
   */
  static renderToHtml(latex: string, options: Partial<RenderOptions> = {}): { html: string; error?: string } {
    try {
      // 定义默认选项
      const defaultOptions: RenderOptions = {
        throwOnError: false,
        displayMode: true,
        fontSize: 100,
        color: '#000000',
        align: 'center'
      };

      // 合并默认选项和用户选项
      const mergedOptions = { ...defaultOptions, ...options };

      // 设置KaTeX配置
      const katexOptions: katex.KatexOptions = {
        displayMode: mergedOptions.displayMode,
        throwOnError: mergedOptions.throwOnError,
        errorColor: '#cc0000',
        strict: 'ignore' // 忽略未知命令，避免渲染失败
      };

      // 渲染LaTeX
      const html = katex.renderToString(latex, katexOptions);

      // 应用格式样式
      const styledHtml = `<div style="text-align: ${mergedOptions.align};">
        <span style="font-size: ${mergedOptions.fontSize}%; color: ${mergedOptions.color};">
          ${html}
        </span>
      </div>`;

      return { html: styledHtml };
    } catch (error) {
      console.error('KaTeX渲染错误:', error);
      return {
        html: `<div style="color: #cc0000;">渲染错误: ${error instanceof Error ? error.message : '未知错误'}</div>`,
        error: error instanceof Error ? error.message : '未知错误'
      };
    }
  }

  /**
   * 渲染LaTeX为SVG
   * @param latex LaTeX代码
   * @param options 渲染选项
   * @returns 包含SVG的HTML字符串
   */
  static renderToSvg(latex: string, options: Partial<RenderOptions> = {}): { svg: string; error?: string } {
    try {
      // KaTeX不直接支持output: 'svg'，但可以通过DOM操作获取SVG
      // 这里返回包含SVG的HTML
      const { html } = this.renderToHtml(latex, options);
      return { svg: html };
    } catch (error) {
      console.error('SVG渲染错误:', error);
      return {
        svg: '',
        error: error instanceof Error ? error.message : '未知错误'
      };
    }
  }

  /**
   * 渲染LaTeX为MathML
   * @param latex LaTeX代码
   * @returns MathML代码
   */
  static renderToMathML(latex: string): { mathml: string; error?: string } {
    try {
      const katexOptions: katex.KatexOptions = {
        displayMode: true,
        throwOnError: false,
        output: 'mathml',
        strict: 'ignore'
      };

      const mathml = katex.renderToString(latex, katexOptions);
      return { mathml };
    } catch (error) {
      console.error('MathML渲染错误:', error);
      return {
        mathml: '',
        error: error instanceof Error ? error.message : '未知错误'
      };
    }
  }

  /**
   * 预览LaTeX公式
   * @param latex LaTeX代码
   * @param options 渲染选项
   * @returns 预览结果
   */
  static preview(latex: string, options: Partial<RenderOptions> = {}): { html: string; error?: string } {
    // 直接使用renderToHtml方法，它已经接受Partial<RenderOptions>
    return this.renderToHtml(latex, options);
  }

  /**
   * 检测LaTeX是否有效（尝试渲染）
   * @param latex LaTeX代码
   * @returns 是否有效
   */
  static isValid(latex: string): boolean {
    try {
      katex.renderToString(latex, {
        throwOnError: true,
        displayMode: true
      });
      return true;
    } catch {
      return false;
    }
  }

  /**
   * 获取支持的LaTeX命令列表（用于自动补全）
   * @returns 常用LaTeX命令列表
   */
  static getSupportedCommands(): string[] {
    return [
      '\\alpha', '\\beta', '\\gamma', '\\delta', '\\epsilon', '\\theta', '\\pi', '\\omega',
      '\\sin', '\\cos', '\\tan', '\\log', '\\ln', '\\sqrt', '\\frac',
      '\\int', '\\sum', '\\prod', '\\lim', '\\Rightarrow', '\\leftarrow',
      '\\leq', '\\geq', '\\neq', '\\times', '\\div', '\\pm'
    ];
  }
}